<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box {
      width: 600px;
      height: 400px;
    }
  </style>
</head>

<body>
  <div id="box"></div>
</body>

</html>
<script src="../node_modules/echarts/dist/echarts.min.js"></script>
<script>
  let charts = echarts.init(document.getElementById('box'));

  let option = {
    backgroundColor: '#333',
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '5%',
      right: '10%',
      top: '15%',
      bottom: '5%',
      containLabel: true
    },
    legend: {
      data: ["A", "B", "C", "D"],
      icon: "circle",
      textStyle: {
        color: '#fff'
      }
    },
    xAxis: [{
      type: 'category',
      data: ['2020-4', '2020-5', '2020-6', '2020-7', '2020-8', '2020-9'],
      axisLine: {
        color: '#fdfeff'
      },
      boundaryGap: false, //坐标轴留白
      axisTick: {
        show: true
      },
      axisLabel: {
        color: '#fdfeff'
      }
    }],
    yAxis: {
      type: 'value',
      name: "单位：个",
      nameTextStyle: {
        color: '#eee'
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,0.5)'
        }
      },
      axisLabel: {
        color: '#fdfeff'
      },
      splitLine: {
        lineStyle: {
          color: '#444',
          type: 'dashed'
        }
      }
    },
    series: [{
        name: "A",
        type: 'line',
        smooth: true, // 圆滑
        symbol: 'circle',
        symbolSize: 10,
        itemStyle: {
          color: 'red'
        },
        // lineStyle: {
        //   color: 'blue'
        // },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [{
              offset: 0,
              color: 'rgba(255,0,0,0.5)' // 0% 处的颜色
            }, {
              offset: 1,
              color: 'rgba(255,0,0,0.04)' // 100% 处的颜色
            }]
          }
          // color: {
          //   type: 'radial',
          //   x: 0.5,
          //   y: 0.5,
          //   r: 0.5,
          //   colorStops: [{
          //     offset: 0,
          //     color: 'red' // 0% 处的颜色
          //   }, {
          //     offset: 1,
          //     color: 'blue' // 100% 处的颜色
          //   }],
          //   global: false // 缺省为 false
          // }
        },
        data: [20, 26, 29, 63, 45, 52]

      },
      {
        name: "B",
        type: 'line',
        symbol: 'circle',
        symbolSize: 10,
        itemStyle: {
          color: 'blue'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [{
              offset: 0,
              color: 'rgba(0,0,255,0.5)' // 0% 处的颜色
            }, {
              offset: 1,
              color: 'rgba(0,0,255,0.04)' // 100% 处的颜色
            }]
          }
        },
        data: [210, 126, 69, 23, 40, 25]

      },
      {
        name: "C",
        type: 'line',
        symbol: 'circle',
        symbolSize: 10,
        itemStyle: {
          color: 'green'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [{
              offset: 0,
              color: 'rgba(0,255,0,0.5)' // 0% 处的颜色
            }, {
              offset: 1,
              color: 'rgba(0,255,0,0.04)' // 100% 处的颜色
            }]
          }
        },
        data: [200, 260, 209, 163, 245, 452]

      },
      {
        name: "D",
        type: 'line',
        symbol: 'circle',
        symbolSize: 10,
        itemStyle: {
          color: '#eaeaea'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [{
              offset: 0,
              color: 'rgba(255,0,0,0.5)' // 0% 处的颜色
            }, {
              offset: 1,
              color: 'rgba(255,0,0,0.04)' // 100% 处的颜色
            }]
          }
        },
        data: [120, 126, 129, 163, 145, 152]

      }
    ]
  }

  charts.setOption(option);
</script>